<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="cfooter" class="footer-grey footer-section">
    <div class="top">
        <div class="content">
            <div class="sub-top">
                <!-- 遍历栏目 和 子栏目 目前后台没有子栏目，需要增加-->
                <ul class="left">
                    <li th:each="category:${CATEGORY_TAG_LIST}" class="bar">
                        <h5 th:text="${category.name}"></h5>
                        <ul th:each="tag:${category.tags}">
                            <a th:href="@{${('/blog/category/' + category.id + '/' + tag.id )}}">
                                <li th:text="${tag.name}"></li>
                            </a>
                        </ul>
                    </li>
                </ul>

                <!-- 读取 数据库中 联系我们设置的内容-->
                <div class="right">
                    <h5>联系我们</h5>
                    <div class="addr">
                        <p style="max-width: 500px" th:text="${CONTACT_US.address}"></p>
                    </div>
                    <div class="e-mail">
                        <p th:text="${CONTACT_US.mailbox}"></p>
                    </div>
                    <div class="tel">
                        <p th:text="${CONTACT_US.fixedTelephone}"></p>
                        <p th:text="${CONTACT_US.phoneNumber + '(' + CONTACT_US.contacts +')'}"></p>
                    </div>
                </div>
            </div>
            <div class="sub-bottom">
                <div class="left">
                    <!--  <div>
                          <img th:src="@{/cweb/img/code1.png}" alt="" />
                          <p>扫码关注了解更多</p>
                      </div>
                      <div>
                          <img th:src="@{/cweb/img/code1.png}" alt="" />
                          <p>扫码关注了解更多</p>
                      </div>-->
                </div>
                <div class="right">
                    <h5>用户反馈</h5>
                    <div>
                        <input placeholder="用户名称" class="name" type="text" id="message_username"/>
                        <input placeholder="联系电话" class="tel" type="text" id="message_phone"/>
                        <input placeholder="电子邮箱" class="e-mail" type="text" id="message_email"/>
                        <input placeholder="QQ" class="qq" type="text" id="message_qq"/>
                        <textarea placeholder="反馈内容" id="message_content" style="height: 150px"></textarea>
                        <button onclick="messageSubmit();">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--TODO 备案号设置 和 技术支持设置（如果需要的话）-->
    <div class="bottom">
        <p>备案号：苏ICP备2021045334号-1</p>
    </div>
    <script th:src="@{/cweb/js/footer-animate.js}"></script>
    <script th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/js/core.js}"></script>
    <script>
        function messageSubmit() {
            let message_username = $('#message_username').val();
            let message_phone = $('#message_phone').val();
            let message_email = $('#message_email').val();
            let message_qq = $('#message_qq').val();
            let message_content = $('#message_content').val();

            if (!message_username) {
                layer.msg("请输入姓名")
                return;
            }

            if (!message_phone) {
                layer.msg("请输入手机号")
                return;
            }

            if (!checkPhone(message_phone)) {
                layer.msg("请输入正确的手机号")
                return;
            }

            if (!message_email) {
                layer.msg("请输入邮箱地址")
                return;
            }

            if (!message_qq) {
                layer.msg("请输入QQ")
                return;
            }

            if (!message_content) {
                layer.msg("请输入您的反馈内容")
                return;
            }
            //TODO 限制输入内容的长度

            Core.postAjax("/blog/api/message/submit", {
                username: message_username,
                phone: message_phone,
                email: message_email,
                qq: message_qq,
                content: message_content
            }, function (data) {
                layer.msg(data.msg, {
                    offset: '30%',
                    time: 800
                }, function () {
                    if (data.status == 200) {
                        $('#message_username').val('');
                        $('#message_phone').val('');
                        $('#message_email').val('');
                        $('#message_qq').val('');
                        $('#message_content').val('');
                    } else if (data.status == 500) {

                    }
                });
            })
        }

        function checkPhone(phone) {
            if (!(/^1[34578]\d{9}$/.test(phone))) {
                return false;
            }
            return true;
        }

        /*化工*/
        function hg_grb() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/calculator/one';
            }
        }

        function hg_gjb() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/calculator/two';
            }
        }

        function hg_zyb() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/calculator/three';
            }
        }

        /*电力设施*/
        function fdss() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/eg';
            }
        }

        /*电网*/

        function dw() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/powergrid';
            }
        }

        //镁冶炼
        function myl() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/magnesiumsmelting';
            }
        }

        //钢铁企业
        function gtqy() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/steel';
            }
        }

        //铝冶炼
        function lyl() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/aluminumsmelting';
            }
        }

        //纺织
        function fzqy() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/spin';
            }
        }

        //民用航空
        function myhk() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/aviation';
            }
        }

        //水泥
        function sqsc() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/cement';
            }
        }

        //平板玻璃
        function pbbl() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/plateglass';
            }
        }

        //陶瓷
        function tcqy() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/ceramics';
            }
        }

        //煤炭
        function coal() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/coal';
            }
        }

        //化工
        function chemicalindustry() {
            if ($('#no_login').length == 1) {
                userLogin();
            } else {
                window.location.href = '/blog/chemicalindustry';
            }
        }
    </script>
</div>
</html>